<template>
	<div id="el">
		<i class="icon_disk yellow_disk ion ion-android-star-outline"></i>
				<i class="icon_disk ion ion-android-alert"></i>
				<i class="icon_disk red_disk ion ion-alert"></i>
				<i class="icon_disk blue_disk ion ion-ios-location-outline"></i>
				<i class="icon_disk green_disk ion ion-android-time"></i>
				<i class="icon_disk green_disk icon_time"></i>
	</div>
</template>


<!-- using string template here to work around HTML <option> placement restriction -->
<script type="text/x-template" id="demo-template">
  <div>
    <p>Selected: {{ selected }}</p>
    <select2 :options="options" v-model="selected">
      <option disabled value="0">Select one</option>
    </select2>
  </div>
</script>

<script type="text/x-template" id="select2-template">
  <select>
    <slot></slot>
  </select>
</script>


<script type="text/javascript">

	export default{
		/*el: '#el',
		component:{select2},
		props: ['options', 'value'],
		template: '#select2-template',
		mounted: function () {
	    var vm = this
		    $(this.$el)
		      .val(this.value)
		      // init select2
		      .select2({ data: this.options })
		      // emit event on change.
		      .on('change', function () {
		        vm.$emit('input', this.value)
		    })
		},*/

	}



	/*Vue.component('select2', {
	  props: ['options', 'value'],
	  template: '#select2-template',
	  mounted: function () {
	    var vm = this
	    $(this.$el)
	      .val(this.value)
	      // init select2
	      .select2({ data: this.options })
	      // emit event on change.
	      .on('change', function () {
	        vm.$emit('input', this.value)
	      })
	  },
	  watch: {
	    value: function (value) {
	      // update value
	      $(this.$el).select2('val', value)
	    },
	    options: function (options) {
	      // update options
	      $(this.$el).select2({ data: options })
	    }
	  },
	  destroyed: function () {
	    $(this.$el).off().select2('destroy')
	  }
	})

	var vm = new Vue({
	  el: '#el',
	  template: '#demo-template',
	  data: {
	    selected: 0,
	    options: [
	      { id: 1, text: 'Hello' },
	      { id: 2, text: 'World' }
	    ]
	  }
	})*/
</script>